<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>图片/文件上传 - layui.upload</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

	<button type="button" class="layui-btn" id="btn">一个标准的按钮</button>


	<button type="button" class="layui-btn" id="test1">
		<i class="layui-icon">&#xe67c;</i>自动上传
	</button>

	<button type="button" class="layui-btn" id="test2">
		<i class="layui-icon">&#xe67c;</i>非自动上传
	</button>

	<button type="button" class="layui-btn" id="test3">
		<i class="layui-icon">&#xe67c;</i>非自动上传
	</button>

	<script>
		layui.use('upload', function () {
			var upload = layui.upload;

			//自动上传
			var uploadInst = upload.render({
				elem: '#test1' //绑定元素
				, url: '/upload/' //上传接口
				, accept: 'file' //允许上传的文件类型
				//,size: 50 //最大允许上传的文件大小
				, done: function (res) {
					//上传完毕回调
				}
				, error: function () {
					//请求异常回调
				}

				//选择文件的回调
				,
			});


			layui.$('#btn').click(function () {


			})
			// 非自动上传，选择文件的回调
			upload.render({
				elem: '#test2'
				, url: '/api/upload/'
				, auto: false //选择文件后不自动上传
				, bindAction: '#btn' //指向一个按钮触发上传

				/**
				 * 在文件被选择后触发，该回调会在 before 回调之前。
				 * 一般用于非自动上传（即 auto: false ）的场景，比如预览图片等。
				 */
				, choose: function (obj) {
					//将每次选择的文件追加到文件队列
					var files = obj.pushFile();

					//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
					obj.preview(function (index, file, result) {
						console.log(index); //得到文件索引
						console.log(file); //得到文件对象
						console.log(result); //得到文件base64编码，比如图片

						//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

						//这里还可以做一些 append 文件列表 DOM 的操作

						//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
						//delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
					});
				}


			});


			
			upload.render({
				elem: '#test3'
				, url: './api/upload/'

				/**
			 * 文件上传前的回调
			 * 在 choose 回调之后、done/error 回调之前触发。
			 * 返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。
			 */
				, before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
					layer.load(); //上传loading
				}
				, done: function (res, index, upload) {
					layer.closeAll('loading'); //关闭loading
				}
				, error: function (index, upload) {
					layer.closeAll('loading'); //关闭loading
				}
			});

		});
	</script>

</body>

</html>